<template>
  <div>
    <h1 class="title">{{ artDetail.title }}</h1>
    <div class="info">
      <span>作者：{{ artDetail.nickname || artDetail.username }}</span>
      <span>发布时间：{{ $formatDate(artDetail.pub_date) }}</span>
      <span>所属分类：{{ artDetail.cate_name }}</span>
      <span>状态：{{ artDetail.state }}</span>
    </div>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 文章的封面 -->
    <img :src="baseURL + artDetail.cover_img" alt="" />
    <!-- 文章的详情 -->
    <div v-html="artDetail.content" class="detail-box"></div>
  </div>
</template>

<script>
import { getArticleDetailFn } from '@/api/index'
import { baseURL } from '@/utils/img_request'
export default {
  name: 'my_artlistView',
  data () {
    return {
      id: '',
      artDetail: '',
      baseURL
    }
  },
  components: {},
  methods: {
    // 获取文章详情
    async showDetailFn () {
      const { data: res } = await getArticleDetailFn(this.id)
      if (res.code !== 0) return this.$message.error('获取文章详情失败!')
      this.artDetail = res.data
      console.log(this.artDetail)
    }
  },
  created () {
    // 将artList组件传入的id传入过来
    this.id = this.$route.query.id
    this.showDetailFn()
  },
  mounted () {}
}
</script>

<style lang='less' scoped>
  .title {
  font-size: 24px;
  text-align: center;
  font-weight: normal;
  color: #000;
  margin: 0 0 10px 0;
}

.info {
  font-size: 12px;
  span {
    margin-right: 20px;
  }
}

// 修改 dialog 内部元素的样式，需要添加样式穿透
::v-deep .detail-box {
  img {
    width: 500px;
  }
}

</style>
